<template>
  <!-- v-if="nowIssueStatus == -1 || getItem('userInfo').id == undefined" -->
  <view
    class="container"
    v-if="nowIssueStatus == -1 || getItem('userInfo').id == undefined"
  >
    <view class="title">发布个人简历</view>
    <view class="content">
      <view class="box">
        <u-tabs
          :list="activeList"
          lineWidth="30"
          lineColor="#f56c6c"
          :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.3)',
          }"
          :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)',
          }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 45px;"
          :current="activeCurrent"
          @change="handleActiveCurrent"
        ></u-tabs>
        <!-- 线上发布 -->
        <view class="view">
          <view class="online" v-if="activeCurrent == 0">
            <view class="name view-row">
              <text>姓名</text>
              <input
                type="text"
                v-model.trim="username"
                placeholder-class="placeC"
                placeholder="请填写真实姓名"
              />
            </view>
            <view class="enterpriseName view-row">
              <text>性别</text>
              <u-radio-group
                v-model="gender"
                iconPlacement="left"
                placement="row"
              >
                <u-radio
                  v-for="(item, index) in genderList"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <!-- <view class="phone">
            <text>电话</text>
            <input
              type="number"
              maxlength="11"
              placeholder-class="placeC"
              placeholder="请填写真实电话"
            />
          </view> -->
            <view class="student-number view-row">
              <text>学号</text>
              <input
                type="number"
                v-model.trim="studentNumber"
                placeholder-class="placeC"
                placeholder="请填写真实学号"
              />
            </view>

            <view class="collapse">
              <van-collapse :value="activeNames" @change="onChange">
                <van-collapse-item title="请选择你的项目类型" name="1">
                  <!-- <view
                  class="collapse-row"
                  v-for="(item, index) in technologyStack"
                  :key="index"
                >
                  <view>{{ item.name }}</view>
                  <van-tag
                    type="primary"
                    v-for="(item2, index2) in item.children"
                    :key="index2"
                    >{{ item2 }}</van-tag
                  >
                </view> -->
                  <u-radio-group
                    v-model="textRadio"
                    iconPlacement="left"
                    placement="row"
                    @change="groupChange"
                  >
                    <u-radio
                      v-for="(item, index) in radiolist2"
                      :key="index"
                      :label="item.name"
                      :name="item.name"
                    >
                    </u-radio>
                  </u-radio-group>
                </van-collapse-item>
              </van-collapse>
            </view>

            <!-- <text style="margin-top: 10rpx; color: #fff">上传作品展示视频~</text> -->
            <view class="works">
              <text>作品：</text>
              <u-upload
                :fileList="videoFileList"
                @afterRead="afterRead"
                @delete="deletePic"
                name="file"
                multiple
                :maxCount="3"
                accept="video"
                :previewFullImage="true"
              ></u-upload>
            </view>
            <!-- <video :src="videoFileList[0]?.url"></video> -->

            <!-- 个人简介 -->
            <u--textarea
              v-model="personalProfile"
              placeholder="请输入个人简介"
              :maxlength="500"
              height="100"
              count
            ></u--textarea>
          </view>

          <!-- 线下面谈 -->
          <view class="offline" v-else>
            <view>
              <u-notice-bar :text="notification"></u-notice-bar>
            </view>

            <!-- <view class="contact">
              <view class="phone">联系方式：{{ env.contactPhone }}</view>
              <i
                class="iconfont icon-shoujichongzhi"
                @click="handleContactPhone"
              ></i>
            </view> -->

            <view class="contact">
              <view class="phone">在校地址：{{ env.studioAddress }}</view>
            </view>

            <view class="name view-row">
              <text>姓名</text>
              <input
                type="text"
                v-model.trim="offlineUsername"
                placeholder-class="placeC"
                placeholder="请输入姓名"
              />
            </view>
            <!-- <view class="classes view-row">
              <text>学号</text>
              <input
                type="text"
                placeholder-class="placeC"
                placeholder="请填写学号"
              />
            </view> -->
            <!-- 备注信息 -->
            <u--textarea
              v-model.trim="noteInformation"
              placeholder="请输入备注信息"
              :maxlength="500"
              height="100"
              count
            ></u--textarea>
          </view>
        </view>
      </view>
      <view class="submit">
        <view class="default-button" @click="handleSubmit">立即提交</view>
      </view>
    </view>
  </view>

  <checkPass v-else-if="nowIssueStatus == 1" />
  <checkFail
    v-else-if="nowIssueStatus == -1 && getItem('userInfo').id != undefined"
  />
  <checkLoading
    v-else-if="nowIssueStatus == 0 && getItem('userInfo').id != undefined"
  />

  <Tabbar :page="page"></Tabbar>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import Tabbar from "@/components/Tabbar/index";
import useHomeStore from "@/store/modules/home";
import env from "@/utils/env";
import {
  makePhoneCall,
  jumpPage,
  chineseReg,
  Alert,
  unAlert,
} from "@/utils/tool";
import { getItem, setItem, updateItem } from "@/utils/localStorage";
import { uploadImage, test, onlineIssue, offlineIssue } from "@/api/issue";
import checkPass from "@/components/checkPass/index.vue";
import checkFail from "@/components/checkFail";
import checkLoading from "@/components/checkLoading";

const page = ref("/pages/issue/index");

const homeStore = useHomeStore();
// 格式化导航高度
const navHeight = `${homeStore.navHeight}px`;

// 哪项激活
const activeCurrent = ref(0);
const activeList = ref([
  {
    name: "线上发布",
  },
  {
    name: "线下面谈",
    badge: {
      isDot: true,
    },
  },
]);
const handleActiveCurrent = (e) => {
  console.log("e：", e);
  activeCurrent.value = e.index;
};

const notification = ref("有相关意向的同学，请填写下方表单，期待你的加入！");

// 拨打电话
const handleContactPhone = () => {
  console.log("你好");
  makePhoneCall(env.contactPhone);
};

// 姓名
const username = ref("");

// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
const gender = ref(null);
// 基本案列数据
const genderList = reactive([
  {
    name: "男",
    disabled: false,
  },
  {
    name: "女",
    disabled: false,
  },
]);

// 学号
const studentNumber = ref("");

// 作品视频
const videoFileList = ref([]);
// 个人简介
const personalProfile = ref("");

const textRadio = ref("");
const thisRadio = ref(undefined); //擅长领域(2安卓，1后端，0前端)
// 基本案列数据
const radiolist2 = reactive([
  {
    name: "Android",
    disabled: false,
  },
  {
    name: "前端",
    disabled: false,
  },
  {
    name: "后端",
    disabled: false,
  },
]);

const groupChange = (e) => {
  console.log("groupChange", e);
  thisRadio.value = e == "Android" ? 2 : e == "前端" ? 0 : 1;

  // console.log("测试：", thisRadio.value);
};

// const radioChange = (n) => {
//   console.log("radioChange", n);
// };

// 折叠面板（项目类型）
const activeNames = ref([0]);
const onChange = (e) => {
  console.log(e);
  if (activeNames.value[0] == "1") {
    activeNames.value = ["2"];
  } else {
    activeNames.value = ["1"];
  }
  console.log(activeNames.value);
};

// 技术栈
const technologyStack = ref([
  {
    name: "前端",
    children: [
      "html5",
      "css",
      "javascript",
      "jQuery",
      "vue",
      "React",
      "Angular",
    ],
  },
  {
    name: "后端",
    children: [
      "Java",
      "Python",
      "javaScript/Node.js",
      "Ruby",
      "Go",
      "PHP",
      "C#",
      "C++",
      "Rust",
      "Elixir",
    ],
  },
  {
    name: "API开发和集成",
    children: ["RESTful API", "GraphQL", "gRPC"],
  },
  {
    name: "数据库",
    children: [
      "MySQL",
      "PostgreSQL",
      "MongoDB",
      "Ruby",
      "Go",
      "PHP",
      "C#",
      "C++",
      "Rust",
      "Elixir",
    ],
  },
]);

// 线下名字
const offlineUsername = ref("");

// 备注信息
const noteInformation = ref("");

// 读取后的处理函数
const afterRead = (file) => {
  // 控制文件大小不得超过15MB
  const fileSize = file.file[0].size / 1024 / 1024;

  console.log("fileSize：", fileSize);

  // 文件大小限制
  if (fileSize > 15) {
    Alert("文件大小不得超过15MB");
    return;
  }

  console.log("afterRead：", file);
  videoFileList.value.push(file.file[0]);

  console.log(videoFileList.value);
};
// 删除图片
const deletePic = (e) => {
  console.log("deletePic：", e);
  videoFileList.value = [];
};

// 审核结果通知消息模板ID
const tmplIds = ref(["qYbGh8GUu4XZWbMDkl4CGf709uldQu_292g4nrUYmPI"]);
// 立即提交
const handleSubmit = async () => {
  // 未登录跳转登录页
  if (!getItem("userInfo")) {
    jumpPage("/pagesC/personalCenter/index");
    return;
  }

  if (activeCurrent.value == 0) {
    console.log(username.value);
    console.log(gender.value);
    console.log(studentNumber.value);
    console.log("thisRadio：", thisRadio.value);

    console.log(videoFileList.value);
    console.log(personalProfile.value);

    // 1. 正则校验
    // 姓名
    if (!username.value) {
      Alert("请输入姓名");
      return;
    } else if (!chineseReg(username.value)) {
      Alert("你是中国人，请用中文");
      return;
    }

    // 性别
    if (!gender.value) {
      Alert("请选择性别");
      return;
    }

    // 学号
    if (!studentNumber.value) {
      Alert("请填写学号");
      return;
    }

    // 项目类型
    if (thisRadio.value == undefined) {
      Alert("请选择你的项目类型");
      return;
    }

    if (!videoFileList.value.length) {
      Alert("请上传个人作品");
      return;
    }

    if (!personalProfile.value) {
      Alert("请输入个人简历简介");
      return;
    }

    // 格式化性别
    let genderFormat = gender.value == "男" ? 1 : 0;

    // console.log(videoFileList.value.map((item) => item.url));

    uni.requestSubscribeMessage({
      tmplIds: tmplIds.value,
      success: async (res) => {
        // 允许
        if (res.qYbGh8GUu4XZWbMDkl4CGf709uldQu_292g4nrUYmPI == "accept") {
          // 线上发布
          const result = await onlineIssue(
            {
              // id: getItem("userInfo").id,
              id: 13,
              username: username.value,
              gender: genderFormat,
              number: studentNumber.value,
              filed: thisRadio.value, //擅长领域(2安卓，1后端，0前端)
              description: personalProfile.value,
              // phone: getItem("userInfo").phone,
            }
            // videoFileList.value.map((item) => item.url
          );

          console.log("result：", result);
          // 审核中
          updateItem("userInfo", "applyState", 0); // 0: 审核中  1：审核通过   -1：审核失败
          updateItem("userInfo", "nowIssueStatus", 0); // 0: 审核中  1：审核通过   -1：审核失败

          nowIssueStatus.value = 0;

          if (result.data.code == 200) {
            Alert("简历提交成功", "success", 1000);
          } else {
            Alert("简历提交失败", "error", 1000);
          }

          // 上传作品
          const result2 = await uploadImage(
            videoFileList.value.map((item) => item.url)
          );
          console.log("result：", result2);

          if (result2.data.code == 200) {
            Alert("上传作品成功", "error", 1000);

            setTimeout(() => {
              unAlert();
              uni.reLaunch({
                url: "/pages/index/index",
              });
            }, 700);
          } else {
            Alert("上传作品失败", "success", 1000);
          }
        }
      },
    });
  } else if (activeCurrent.value == 1) {
    // 正则校验
    // 姓名
    if (!offlineUsername.value) {
      Alert("请输入姓名");
      return;
    } else if (!chineseReg(offlineUsername.value)) {
      Alert("你是中国人，请用中文");
      return;
    }

    // 备注信息
    if (!noteInformation.value) {
      Alert("请输入备注信息");
      return;
    }

    uni.requestSubscribeMessage({
      tmplIds: tmplIds.value,
      success: async (res) => {
        const result = await offlineIssue({
          id: getItem("userInfo").id,
          username: offlineUsername.value,
          remark: noteInformation.value,
        });

        if (result.data.code == 200) {
          Alert("提交成功", "success", 1000);

          setTimeout(() => {
            unAlert();
            uni.reLaunch({
              url: "/pages/index/index",
            });
          }, 700);
        } else {
          Alert("提交失败", "success", 1000);
        }

        console.log("线下提交简历的result：", result);
      },
    });
  }
};

// 分析简历提交审核状态
const nowIssueStatus = ref(-2);

onShow(() => {
  nowIssueStatus.value =
    getItem("nowIssueStatus") == 0
      ? 0
      : getItem("nowIssueStatus") == 1
      ? 1
      : -1;
});

// 分析简历提交审核状态
// const nowIssueStatus = computed(
//   {
//     // getter
//   get() {
//     return getItem("issueStatus") == 0 ? 0 : getItem("issueStatus") == 1 ? 1 : -1;
//   },
//   // setter
//   set(newValue) {
//     console.log("你好：", newValue)
//   }
//   }
// );
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  width: 750rpx;
  padding: 0 40rpx;
  // version1.0.0
  // background-image: linear-gradient(
  //   to bottom,
  //   #0033cd,
  //   #2755dd,
  //   #f2f7ff,
  //   #f9f9f9,
  //   #dfe5f5
  // );
  // version1.0.1
  background-image: linear-gradient(
    to bottom,
    #0033cd,
    #2755dd,
    #e9a4a4,
    #f9f9f9,
    #dfe5f5
  );

  // 标题
  .title {
    height: v-bind(navHeight);
    // border: 1px solid red;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 36rpx;
    padding-bottom: 15rpx;
    color: #fff;
  }

  // 主题内容
  .content {
    padding-top: 24rpx;
    // 盒子
    .box {
      // height: 1000rpx;
      height: 65vh;
      // border: 1px solid red;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 40rpx 40rpx 0 0;
      backdrop-filter: blur(100px);
      overflow: hidden;
      // background-image: linear-gradient(
      //   to bottom,
      //   #9ab4e7,
      //   #fafafc,
      //   #fafafc,
      //   #fafafc,
      //   #fafafc
      // );

      .view {
        // background-color: #ffffff59;
        background-color: #fff;
        // border-radius: rpx 25rpx 0 0;
        padding-left: 60rpx;

        height: 100%;
        border-radius: 0 0 30rpx 30rpx;
        padding-right: 60rpx;
        padding-bottom: 50rpx;
        overflow-y: scroll;

        // 线上发布
        .online {
          .view-row {
            display: flex;
            justify-content: space-between;
            height: 100rpx;
            align-items: center;
            // border-bottom: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e817;
            // padding-right: 50rpx;
            font-size: 28rpx;

            .placeC {
              font-size: 28rpx;
              color: #fff;
            }

            text {
              min-width: 170rpx;
            }

            input {
              flex: 1;
              // padding-right: 10rpx;
              // font-size: 28rpx;
              box-sizing: border-box;
            }
          }

          .enterpriseName {
            // text {
            //   &::before {
            //     content: "*";
            //     color: red;
            //     margin-left: -20rpx;
            //     margin-right: 5rpx;
            //   }
            // }
          }

          .student-number {
          }

          .personalProfile {
            border: 1px solid red;
          }

          .collapse {
            // height: unset;
            // display: unset;
            // justify-content: unset;
            // /* height: 100rpx; */
            // align-items: unset;
            // border-bottom: unset;
            // font-size: unset;
            .van-collapse-item__content .content-class {
              padding: 0 !important;
              padding-left: 30rpx !important;
            }
            .collapse-row {
              // margin-right: 20rpx;
              margin-bottom: 20rpx;

              van-tag {
                margin-right: 30rpx;
              }
            }
          }

          .works {
            display: flex;
            margin-top: 20rpx;

            text {
              font-size: 28rpx;
              color: #383838;
            }
          }
        }

        // 线下面谈
        .offline {
          .contact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 25rpx 0 10rpx;

            .iconfont {
              font-size: 40rpx;
            }
          }

          .view-row {
            display: flex;
            justify-content: space-between;
            height: 100rpx;
            align-items: center;
            // border-bottom: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e817;
            // padding-right: 50rpx;
            font-size: 28rpx;

            .placeC {
              font-size: 28rpx;
              color: #fff;
            }

            text {
              min-width: 170rpx;
            }

            input {
              flex: 1;
              // padding-right: 10rpx;
              // font-size: 28rpx;
              box-sizing: border-box;
            }
          }
        }
      }

      .default-address {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 60rpx;
        background-color: #fff;
        font-size: 28rpx;
        margin-top: 10rpx;
        border-radius: 25rpx;
      }
    }

    // 提交
    .submit {
      // 覆盖默认样式
      .default-button {
        width: 50%;
        bottom: unset;
        background-color: #0035d3;
        bottom: 200rpx;
      }
    }
  }
}

:deep(.u-radio-group) {
  .u-radio {
    margin-right: 30rpx;
  }
}

:deep(.u-textarea) {
  // background-color: #ffffff78 !important;
  // margin-right: 55rpx;
  margin-top: 10rpx;
  border: 1px solid #e6e6e6;
}

// 折叠面板
:deep(.van-cell) {
  padding: 20rpx 0 !important;
}

// tab
:deep(.u-tabs) {
  align-items: center;
  background-color: #fff;
  padding-top: 3rpx;
  padding-bottom: 3rpx;

  //
  // padding-left: 175rpx;
}
</style>
